<template>
  <div class="panel-container">
    <div class="left">
      <div class="left-top">左上</div>
      <div class="left-bottom">
        <div class="left-bottom-item">
          <Monitor></Monitor>
        </div>
        <div class="left-bottom-item">
          <Operate></Operate>
        </div>
        <div class="left-bottom-item">
          <Property></Property>
        </div>
      </div>
    </div>

    <div class="right">
      <Shop></Shop>
    </div>
  </div>
</template>
<script>
import {defineComponent} from "vue";
import Monitor from "@/views/panel/components/Monitor.vue";
import Operate from "@/views/panel/components/Operate.vue";
import Property from "@/views/panel/components/Property.vue";
import Shop from "@/views/panel/components/Shop.vue";

export default defineComponent({
  components: {Shop, Property, Operate, Monitor}
})
</script>

<style lang="scss" scoped>
.panel-container {
  display: flex;
  padding: 24px;
  justify-content: space-between;

  .left {
    display: flex;
    flex-direction: column;
    width: 72%;
    .left-top {
      border-radius: 16px;
      height: 500px;
      background-color: #fff;
    }
    .left-bottom {
      display: flex;
      justify-content: space-between;
      flex:1;
      margin-top: 20px;
      .left-bottom-item {
        width: 32%;
        height: 100%;
      }
    }
  }

  .right {
    width: 27%;
    border-radius: 16px;
    height: 800px;
    background-color: #fff;
  }
}
</style>
